$main-color: #5e7ce0;
$hover-color: #f2f5fc;
$disbaled-color: #f5f5f6;
$flevel-color: #252b3a;
$slevel-color: #575d6c;
$border-color: #adb0b8;
$border-color2: #eeeeee;
$warning-color: #de504e;
$tip-color: #333333;

$fs-1:24px;
$fs-2:16px;
$fs-3:14px;
$fs-4:12px;

// 通用辅助样式
.tips {
    font-size: $fs-3;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: $border-color;
    margin-top: 5px;
    line-height: 20px;
}

.warning {
    font-size: $fs-3;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: $warning-color;
    margin-top: 5px;
    line-height: 20px;
}


// 界面模块样式
.page-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .page-content {
        flex: 1;
        padding: 0 20px 20px;
        overflow: hidden;
    }

    .bottom-btn {
        padding: 5px 0;
        text-align: center;
        margin-top: 12px;
        background: #fff;

        /deep/ .el-button {
            min-width: 98px !important;
        }
    }

    .p-0 {
        padding: 0 !important;
    }

    .p-b-20 {
        padding-bottom: 20px !important;
    }

    .p-20 {
        padding: 20px!important;
    }
    .p-x-0 {
        padding: 20px 0!important;
    }
    .p-t-btn{
        padding: 0 0px 20px!important;
    }
    .p-t-20{
        padding-top: 20px!important;
    }
    .page-column {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        padding: 0 20px 20px;
        padding-bottom: 10px;

        .page-form {
            flex: 1;
            overflow: auto;
            padding-top: 20px;
        }

        .table-box {
            flex: 1;
            border-radius: 5px;
            overflow: hidden;

            .el-table__header tr,
            .el-table__header th {
                padding: 0;
                height: 40px;
            }

            .el-table__body tr,
            .el-table__body td {
                padding: 0;
                height: 54px;
            }

            /deep/ .el-button {
                min-width: 0;
            }
            .el-table-column--selection .cell{
                padding-left: 14px;
            }

        }

        .pagination {
            margin-top: 10px;
        }

        .search-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            position: relative;

            /* ============ 列设置 ======================== */
            .sel-colume h3 .el-checkbox {
                position: absolute;
                left: 10px;
            }

            .sel-colume h3 .el-checkbox__label {
                vertical-align: middle;
            }

            .sel-colume h3 {
                height: 28px;
                line-height: 28px;
            }

            .sel-colume {
                position: absolute;
                top: 54px;
                right: 0px;
                width: 160px;
                background: #fff;
                z-index: 10;
                box-shadow: 0px 2px 8px 0px rgba(94, 124, 224, 0.28);
            }

            .sel-colume .el-checkbox {
                margin: 0;
            }

            .light-blue-btn {
                color: #585E6C;
            }

            .sel-colume-button {
                height: 38px;
                line-height: 38px;
                display: flex;
                justify-content: space-between;
                padding: 0 10px;
                border-top: 1px solid $border-color2;

                /deep/ {
                    .el-button {
                        padding: 5px 0px !important;
                        min-width: 0;
                    }
                }
            }

            .sel-colume .el-checkbox-group div {
                padding: 0 0 0 10px;
                height: 30px;
                line-height: 30px;
                cursor: pointer;
            }

            .sel-colume .el-checkbox-group div:hover {
                background: $hover-color;
            }

            .sel-colume .el-checkbox-group {
                height: 210px;
                overflow: auto;
            }

            .search-icon {
                display: inline-block;
                width: 28px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                vertical-align: bottom;
                cursor: pointer;
                border: 1px solid $border-color;

                &:hover {
                    border: 1px solid $slevel-color;
                }



            }

            .activeicon {
                color: $main-color !important;
                border: 1px solid $main-color;
            }

            .shaixuan {
                width: 100px;

          

                i {
                    padding-left: 14px;
                }

                &:hover {
                    color: $slevel-color;
                    border: 1px solid $slevel-color;
                    background: #fff;
                }

                &:active {
                    color: $main-color;
                    background: $hover-color;
                }
            }
            .activesx {
                color: $main-color;
                background: $hover-color;
            }

            .search-input {
                width: 200px;

                /deep/ .el-input__inner {
                    &:hover {
                        border: 1px solid $slevel-color;
                    }

                }

                /deep/ .el-button {
                    min-width: 0;
                }

                /deep/ .el-input-group__append {
                    padding: 0 9px;
                    background: #fff;
                }
            }

            .m-r-12 {
                margin-right: 12px !important;
            }

            /deep/ .el-button+.el-button {
                margin-left: 0;
            }
        }
    }
    .m-x-0{
        margin:20px 0px !important;
    }
    .m-b-20{
        margin-bottom:20px !important;
    }
    .page-row {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;

        .box-left {
            width: 300px;
            margin-right: 12px;
            display: flex;
            flex-direction: column;
            flex: none;
            background: #fff;
            padding: 20px;
            padding-top: 0;

            .search-input {
                margin-top: 10px;
                margin-bottom: 20px;
            }


            .tree-box-inner {
                display: flex;
                flex-direction: column;
                height: 100%;

                /deep/ .el-button {
                    min-width: 0;
                }

                .tree-content {
                    flex: 1;
                    background: $hover-color;
                    margin-top: 20px;
                    padding: 20px;
                }

                .tree-head {
                    padding-top: 20px;
                    padding-bottom: 38px;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid $border-color2;



                    .th-right {
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                        text-align: right;

                        i {
                            font-size: 16px;
                            margin-right: 16px;
                            color: $border-color;

                            &:last-child {
                                margin-right: 0;
                            }

                            &:hover {
                                color: $main-color;
                            }
                        }
                    }

                    .th-img {
                        border-radius: 50%;
                        width: 60px;
                        height: 60px;
                        background: red;
                    }
                }

                .btn-box {
                    padding: 11px 0;
                    border-bottom: 1px solid $border-color2;

                    .btn-search {
                        float: right;
                    }

                    button {
                        padding: 0;

                        /deep/ i {
                            font-size: 16px;
                        }
                    }
                }

                .treediv {
                    background: #fff;
                    height: 100%;
                    overflow: auto;
                    /deep/ .el-tree-node {

                        min-width: 100%;
                        float: left;
                    
                        .el-tree-node__content {
                    
                            .custom-tree-node {
                                .label {
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                                .button-wrap {
                                    display: none;
                                    .button {
                                        display: inline-block;
                                        vertical-align: middle;
                                        width: 16px;
                                        height: 16px;
                                        background-image: url('/img/tree/zTreeStandard2.png');
                                        &.add {
                                            background-position: -143px 0;
                                        }
                                        &.edit {
                                            background-position: -110px -48px;
                                        }
                                        &.remove {
                                            background-position: -110px -64px;
                                        }
                                    }
                                }
                            }
                    
                            &:hover {
                                .custom-tree-node {
                                    .button-wrap {
                                        display: inline;
                                    }
                                } 
                            }
                        }
                    
                        &.is-current > .el-tree-node__content > .custom-tree-node > .button-wrap {
                            display: inline-block;
                        }
                    }
                }

                .search-bar {
                    margin-bottom: 5px;
                }

            }
        }

        .box-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 0;
            background: #fff;
            padding: 0 20px;

            .flex-tabs>.el-tabs__content {
                >.el-tab-pane {
                    padding-bottom: 0;
                }
            }

            // el-tabs 竖向flex布局
            .flex-tabs {
                display: flex;
                flex-direction: column;
                height: 100%;
                overflow: hidden;

                /deep/ .el-tabs__nav-wrap::after {
                    height: 1px;
                    background-color: $border-color2;
                }

                >.el-tabs__header {
                    margin-bottom: 0;
                }

                >.el-tabs__content {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    overflow: hidden;

                    >.el-tab-pane {
                        height: 100%;
                        overflow-x: hidden;
                        overflow-y: auto;
                    }

                }

                .tab-title {
                    line-height: 35px;
                    padding-left: 10px;
                    font-weight: 600;

                    .tab-btn {
                        float: right;

                        .pd9 {
                            padding: 9px;
                        }
                    }
                }
            }

            .table-box {
                flex: 1;
                border-radius: 5px;
                overflow: hidden;

                /deep/ .el-button {
                    min-width: 0;
                }


            }
        }
    }
}



// 表单模块样式
.layout-wrap {
    /deep/ .el-form-item__label {
        line-height: 36px;
    }

    /deep/ .el-input__inner {
        line-height: 36px;
        height: 36px;
    }

    /deep/ .el-form-item__content {
        line-height: 36px;
    }

    /deep/ .el-checkbox {
        margin-right: 20px;
    }

    /deep/ .el-form-item.is-error .el-input__inner {
        border: 1px solid $warning-color;
    }

    /deep/ .el-form-item__error {
        color: $warning-color;
        position: static;
    }

    .form-daterange {
        width: 420px !important;
    }

    .form-date {
        width: 200px !important;
    }

    .form-checkbox {
        /deep/ .el-form-item__content {
            line-height: 20px !important;
            padding-top: 8px;
        }
    }
}

.smallForm {
    max-width: 260px;
    min-width: 260px;

    /deep/ .el-checkbox-group {
        max-width: 260px;
        min-width: 260px;
    }

    /deep/ .edui-default .edui-editor {
        max-width: 520px;
        min-width: 520px;
    }
}

.mediumForm {
    max-width: 50%;
    min-width: 50%;

    /deep/ .el-select {
        max-width: 480px;
        min-width: 480px;
    }
}

.bigForm {
    max-width: 100%;
    min-width: 100%;

    /deep/ .el-select {
        max-width: 480px;
        min-width: 480px;
    }
}


// 默认element样式修改
.mw-0{
    min-width: 0!important;
}
.el-button {
    min-width: 98px;
}

.el-popper {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-form-item__content {
    width: 100%;
}

.el-form-item {
    margin-bottom: 14px;
}

.el-input-number {
    width: 180px;
}

.el-date-table td.in-range div {
    background: $hover-color;
}

.el-date-table td.available:hover {
    background: $hover-color;
    border-radius: 50%;
}

.el-select-dropdown__item.selected {
    background: $main-color;
    color: #fff;

    &:hover {
        background: $main-color;
        color: #fff;
    }
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background: $hover-color;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
    background: $hover-color;
}


// 公共登录页
.login {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 1024px;

    .login-head {
        height: 50px;
        line-height: 50px;
        background: #0083C0;
        padding: 0px 40px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            width: 143px;
            height: 30px;
            display: inline-block;
            margin-right: 12px;
        }

        .l-h-left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .logotext{
                font-size: 26px;
                font-family: Regular;
                text-shadow: 1px 1px 10px #000; 
            }
        }

        .l-h-icon {
            font-size: 18px;
        }
    }
    .login-frame {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        flex: 1;
        width: 100%;
        background: url('/img/login/bj.png') no-repeat;
        background-size: cover;
        background-position: center;
        min-width: 1024px;
        .login-m{
            position: absolute;
            top: 40px;
            right: 58px;
            width: 397px;
            height: 66px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .login-pic {
            height: 100%;
            width:934px;
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;
            margin-left: 3%;
            margin-bottom:50px ;
            img {
                width: 100%;
                height: auto;
            }
        }

        .login-form {
            position: relative;
            background: #fff;
            padding: 54px 30px;
            min-width: 425px;
            max-width: 425px;
            box-shadow: 0px 6px 81px 0px rgba(61, 62, 73, 0.16);
            border-radius: 3px;
            margin-right: 10%;
            margin-top: 216px;
            margin-bottom: 110px;

            .form-head {

                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                text-align: center;
                padding-bottom: 42px;
            }

            .regist-tip {
                cursor: pointer;
                position: absolute;
                display: inline-block;
                padding: 8px 15px;
                border-radius: 20px;
                border: 1px solid lightgreen;
                top: 10px;
                right: 10px;
                color: lightgreen;
            }

            img.qrcode {
                width: 200px;
                height: 200px;
                display: block;
                margin: 60px auto;
            }

            .login-form__wrap {
                /deep/ {
                    .el-input__inner {
                        height: 50px;
                        line-height: 50px;

                        &:hover {
                            border-color: $slevel-color;
                        }
                    }

                    .el-input__prefix {
                        left: 10px;
                    }

                    .el-input__suffix {
                        right: 13px;
                    }

                    .el-input--prefix .el-input__inner {
                        padding-left: 40px;
                    }

                    .el-input__icon {
                        line-height: 50px;
                        font-size: 16px;
                    }
                }

                .verif-wrap {
                    display: flex;

                    .input-w {
                        flex: 1;
                        margin-right: 10px;
                    }

                    .code-w {
                        width: 90px;
                        height: 50px;
                        border: 1px solid rgba(176, 176, 176, 1);
                        border-radius: 3px;
                        overflow: hidden;
                    }
                }
            }

            .login-btn {
                width: 100%;
                height: 50px;
                background: #5E7CE0;
                border-radius: 3px;
            }

            .m-b-0 {
                margin-bottom: 0;
            }

            .mm {
                /deep/ .el-input__suffix .el-input__icon {
                    font-size: 13px;
                }

                /deep/ .el-input__suffix-inner {
                    padding-right: 4px;
                }
            }

            .verif-wrap {
                /deep/ .el-input__prefix {
                    padding-left: 4px;
                }
            }

            .btn-wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #999999;
                padding: 20px 0 30px;

                span {
                    cursor: pointer;

                    &:hover {
                        color: $main-color;
                    }
                }

                .right-b {
                    /deep/ .el-checkbox {
                        color: #333 !important;

                        &:hover {
                            color: $main-color;
                        }
                    }

                }
            }
        }
        .login-bottom {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background:rgba($color: #104189, $alpha: 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: $fs-4;
            color: #fff;
    
            .bot_con{
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    width: 34px;
                    height: 34px;
                }
                .b-c-r{
                    display: flex;
                    flex-direction: column;
                    align-content: space-between;
                    margin-left: 11px;
                    span{
                        height: 20px;
                        line-height: 20px;
                    }
                }
            }

            .l-b-right {
                text-decoration: underline;
                cursor: pointer;
            }
    
            .line {
                padding: 0 20px;
                display: inline-block;
                height: 14px;
            }
        }
    }

    .margin-b20 {
        margin-bottom: 20px;
    }
}